<template>
  <h1>G6</h1>
  <div id="mountNode"></div>
</template>

<script>
import G6 from "@antv/g6";
import { onMounted } from "vue";
export default {
  setup () {
    const showDetails = (item) => {
      return () => {
        console.log(item);
      };
    };

    G6.registerNode(
      "rect-jsx",
      (cfg) => `
    <group>
      <rect>
        <rect style={{
          width: 150,
          height: 20,
          fill: ${cfg.color},
          radius: [6, 6, 0, 0],
          cursor: 'move'，
          stroke: ${cfg.color}
        }} draggable="true">
          <text style={{
            marginTop: 2,
            marginLeft: 75,
            textAlign: 'center',
            fontWeight: 'bold',
            fill: '#fff' }} draggable="true">{{label}}</text>
        </rect>
        <rect style={{
          width: 150,
          height: 55,
          stroke: ${cfg.color},
          fill: #ffffff,
          radius: [0, 0, 6, 6],
          cursor:pointer
        }}>
          <text style={{ marginTop: 5, marginLeft: 3, fill: '#333', marginLeft: 4 }}>描述: {{description}}</text>
          <text style={{ marginTop: 10, marginLeft: 3, fill: '#333', marginLeft: 4 }}>创建者: {{meta.creatorName}}</text>
        </rect>
      </rect>
      
    </group>`
    );

    const data = {
      nodes: [
        {
          x: 0,
          y: 0,
          description: "ant_type_name_...",
          label: "Type / ReferType",
          color: "#2196f3",
          meta: {
            creatorName: "a_creator",
          },
          id: "node1",
          type: "rect-jsx",
        },
        {
          x: 100,
          y: 100,
          description: "node2_name...",
          label: "JSX Node",
          color: "#2196f3",
          meta: {
            creatorName: "a_creator",
          },
          id: "node2",
          type: "rect-jsx",
        },
        {
          x: 400,
          y: 0,
          description: "ant_type_name_...",
          label: "Type / ReferType",
          color: "#2196f3",
          meta: {
            creatorName: "a_creator",
          },
          id: "node3",
          type: "rect-jsx",
        },
        {
          x: 300,
          y: 100,
          description: "node2_name...",
          label: "JSX Node",
          color: "#2196f3",
          meta: {
            creatorName: "a_creator",
          },
          id: "node4",
          type: "rect-jsx",
        },
        {
          x: 200,
          y: 300,
          description: "node2_name...",
          label: "common Node",
          color: "red",
          meta: {
            creatorName: "a_creator",
          },
          id: "node5",
          type: "rect-jsx",
        },
      ],
      edges: [
        { source: "node1", target: "node2" },
        { source: "node3", target: "node4" },
        { source: "node2", target: "node5" },
        { source: "node4", target: "node5" },
      ],
    };

    onMounted(() => {
      const graph = new G6.Graph({
        container: "mountNode", // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
        width: 800, // Number，必须，图的宽度
        height: 500, // Number，必须，图的高度
        fitCenter: true,
        modes: {
          default: ["drag-node", "zoom-canvas"],
        },
        defaultEdge: {
          // ... 其他属性
          style: {
            // stroke: "#eaff8f",
            // lineWidth: 5,
            endArrow: true,
            // ... 其他样式属性
          },
        },
        animate: true,
        animateCfg: {
          duration: 500, // Number，一次动画的时长
          easing: "linearEasing", // String，动画函数
        },
      });

      graph.on("node:click", (ev) => {
        const shape = ev.target;
        const node = ev.item;
        console.log(ev);
      });

      graph.data(data); // 读取 Step 2 中的数据源到图上
      graph.render(); // 渲染图

      // setInterval(() => {
      //   data.nodes.forEach((node) => {
      //     node.x += Math.random() * 50 - 25;
      //     node.y += Math.random() * 50 - 25;
      //   });
      //   graph.changeData(data);
      // }, 600);
    });

    return {};
  },
};
</script>
<style lang="less">
#mountNode {
  border: 1px solid #ccc;
  > canvas {
    border: 1px solid red;
  }
}
</style>
